<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 250px;
            height: 250px;
            background-color: green;
            margin: 100px auto;
            border-radius: 50%;
        }

        /*全屏伪类：当元素处于全屏时，改变元素的背景色*/
        .box:-webkit-full-screen {
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box"></div>

    <script>
        var box = document.querySelector('.box');
        // box.requestFullscreen();   //直接这样写是没有效果的。之所以无效，应该是浏览器的机制，必须要点一下才可以实现全屏功能。
        document.querySelector('.box').onclick = function () {
            // 开启全屏显示的兼容写法
            if (box.requestFullscreen) {  //如果支持全屏，那就让元素全屏
                box.requestFullscreen();
            } else if (box.webkitRequestFullScreen) {
                box.webkitRequestFullScreen();
            } else if (box.mozRequestFullScreen) {
                box.mozRequestFullScreen();
            }

        }
    </script>
</body>

</html>